<template>
  <div class="container">
    <TopNav title="智能化营养系统"/>
    <!--  轮播图 start-->
    <van-swipe class="swiper" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="swiper-item" v-for="(item,index) in swiperList" :key="index">
        <van-image class="img" fit="fill" :src="item"></van-image>
      </van-swipe-item>
    </van-swipe>
    <!--  轮播图 end-->
    <!--  卡片 start-->
    <CardList :list="cardList"/>
    <!--  卡片 end-->
    <!--  广告 start-->
    <AdvList :list="advList"/>
    <!--  广告 end-->
  </div>
</template>
<script setup>
import {reactive} from "vue";
import {useRouter} from 'vue-router'
import {useDataStore} from "@/stores/dataStore"
import TopNav from "@/components/TopNav/Index.vue"
import AdvList from "@/components/List/AdvList/Index.vue"
import CardList from "@/components/List/CardList/Index.vue"

const dataStore = useDataStore()

const router = useRouter()
//初始化轮播图
const swiperList = reactive([
  "https://img.tuguaishou.com/ips_templ_preview/69/1d/29/lg_4187185_1627468002_610130e2a66db.jpg!w1024_w?auth_key=2285688230-0-0-3e7e9b2c72631d954eccff8c10b1de7b",
  "https://img.tuguaishou.com/ips_templ_preview/79/69/f1/lg_4341783_1628577536_61121f0017f74.jpg!w1024_w?auth_key=2276906384-0-0-e3636e037641896ea1927f1503fe5cd6",
  "https://gd-hbimg.huaban.com/edc2dcec1b30b4b9dd522484da75909390fbf2dea2571-aZ6JiB_fw658",
  "https://q3.itc.cn/images01/20240625/e0323733a8764ecd9932adc3e1776cac.jpeg",
])
//卡片列表
const cardList = reactive([
  {
    img: '',
    title: '营养评估',
  },
  {
    img: '',
    title: '个性方案',
  },
  {
    img: '',
    title: '实时跟踪',
  },
  {
    img: '',
    title: '营养订餐',
  },
])
//广告列表
const advList = reactive([
  {
    img: 'https://kano-sns.guahao.cn/UI862282878',
  },
  {
    img: 'https://p1.itc.cn/images03/20200520/8f3ec879e4a946fab511f11f2037401f.jpeg',
  },
  {
    img: 'https://5b0988e595225.cdn.sohucs.com/images/20180704/dea8314250e2441691035c210fdb4d78.jpeg',
  },
  {
    img: 'https://img2.baidu.com/it/u=2101738325,37355167&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
  },
  {
    img: 'https://p.ivideo.sina.com.cn/l/c/aad3cd94637ddeda7dfbd2a41b8f3762.jpeg',
  },
])
</script>
<style scoped lang="scss">
.container {
}

.swiper {
  .swiper-item {
    .img {
      width: 100%;
      height: 170px;
    }
  }
}
</style>
